<template>
  <view class="Looking_for_a_job">
    <view class="header">
      <image class="img" src="@/static/img/index/header.png"></image>
      <view class="name">
        <view class="text">职聊社交</view>
      </view>
      <view class="input">
        <u-icon name="search" color="#BCBCBC" size="48"></u-icon>
        <up-input
          class="input"
          shape="circle"
          border="none"
          clearable
          placeholder="搜索职位名称、公司"
        ></up-input>
      </view>
    </view>
    <view class="main">
      <view class="work line">
        <view class="workItem">
          <view class="box active"> UI设计师 </view>
        </view>
        <u-icon name="plus" color="#1C1C1C" size="54"></u-icon>
      </view>
      <view class="screen line">
        <view class="left">
          <view class="active">推荐</view>
          <view>附近</view>
        </view>
        <view class="right">
          <view>武汉</view>
          <view @tap="toFilterJob">排序</view>
        </view>
      </view>
      <view class="content">
        <scroll-view :scroll-y="true" class="scroll-Y">
          <template v-for="item in 20" :key="item">
            <view class="box line">
              <view class="one">
                <view class="one-title">
                  <view class="name">UI设计师</view>
                  <view class="wanted">急聘</view>
                </view>
                <view class="price">4-8K</view>
              </view>
              <view class="two">
                <view>微优品</view>
                <view>20-99人</view>
                <view>未融资</view>
              </view>
              <view class="three">
                <view>5-10年</view>
                <view>本科</view>
                <view>视觉设计</view>
              </view>
              <view class="four">
                <image class="img" src="@/static/img/index/header.png"></image>
                <view class="desc">向先生.人力行政经理</view>
                <view class="online">
                  <view class="dot"></view>
                  <view class="text">在线</view>
                </view>
                <view class="address"> 武昌区水果湖 </view>
              </view>
            </view>
          </template>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
function toFilterJob() {
  uni.navigateTo({
    url: "/pages/filterJob/filterJob",
  });
}
</script>

<style lang="scss" scoped>
.Looking_for_a_job {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    width: 750rpx;
    height: 452rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
      180deg,
      #005eff 0%,
      #00cbff 100%,
      rgba(0, 170, 255, 0.85) 100%
    );

    .img {
      width: 750rpx;
      height: 452rpx;
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .name {
      width: 750rpx;
      height: 88rpx;
      margin-top: 88rpx;
      position: relative;
      z-index: 1;
      padding-left: 12rpx;
      display: grid;
      align-items: center;

      .text {
        font-size: 44rpx;
        font-weight: 400;
        color: #fff;
      }
    }

    .input {
      width: 708rpx;
      height: 80rpx;
      margin-top: 12rpx;
      background-color: #fff;
      position: relative;
      z-index: 1;
      border-radius: 80rpx;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 12rpx;
      padding: 0 24rpx;
    }
  }

  .main {
    width: 750rpx;
    height: calc(100% - 346rpx);
    position: absolute;
    z-index: 1;
    background-color: #fff;
    bottom: 0;
    border-radius: 32rpx 32rpx 0 0;
    display: grid;
    grid-template-rows: 126rpx 90rpx 1fr;

    .work {
      padding: 0 16rpx;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;

      .workItem {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 16rpx;

        .box {
          height: 100%;
          display: grid;
          align-items: center;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 32rpx;
          color: #1c1c1c;
          transition: all 0.3s;
        }

        .active {
          font-size: 38rpx;
          position: relative;
        }

        .active::after {
          content: " ";
          position: absolute;
          width: 60rpx;
          height: 10rpx;
          background: #1872ff;
          border-radius: 8rpx;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    .screen {
      padding: 0 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        gap: 30rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 30rpx;
        color: #5a5a5a;

        .active {
          font-weight: 500;
          color: #1c1c1c;
        }
      }

      .right {
        display: flex;
        gap: 16rpx;

        > view {
          width: 124rpx;
          height: 60rpx;
          background: #f6f6f6;
          border-radius: 8rpx;
          display: grid;
          place-items: center;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 30rpx;
          color: #5a5a5a;
          position: relative;
        }

        > view::after {
          position: absolute;
          content: " ";
          right: 20rpx;
          bottom: 8rpx;
          width: 0;
          height: 0;
          border-left: 6rpx solid transparent;
          /* 左边线透明 */
          border-top: 4rpx solid transparent;
          /* 上边线透明 */
          border-right: 4rpx solid #bcbcbc;
          /* 右边线蓝色，可根据需要调整颜色 */
          border-bottom: 4rpx solid #bcbcbc;
          /* 下边线蓝色，可根据需要调整颜色 */
        }
      }
    }

    .content {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .scroll-Y {
        width: 100%;
        height: 100%;
      }

      .box {
        width: 750rpx;
        height: 302rpx;
        padding: 18rpx 28rpx 0 30rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        margin-top: 20rpx;

        .one {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-title {
            display: flex;
            gap: 18rpx;
            align-items: center;

            .name {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 500;
              font-size: 34rpx;
              color: #1c1c1c;
            }

            .wanted {
              width: 80rpx;
              height: 40rpx;
              border: 2rpx solid #fd1313;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 24rpx;
              color: #fd1313;
              display: grid;
              place-items: center;
              border-radius: 8rpx;
            }
          }

          .price {
            font-family: DIN, DIN;
            font-weight: 500;
            font-size: 36rpx;
            color: #1872ff;
          }
        }

        .two {
          display: flex;
          gap: 20rpx;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 28rpx;
          color: #5a5a5a;
        }

        .three {
          display: flex;
          gap: 14rpx;

          > view {
            height: 50rpx;
            background: #f6f6f6;
            border-radius: 8rpx;
            padding: 0 16rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 24rpx;
            color: #676767;
            display: grid;
            place-items: center;
          }
        }

        .four {
          display: grid;
          grid-template-columns: 52rpx 200rpx 104rpx 1fr;
          align-items: center;
          gap: 20rpx;

          .img {
            width: 52rpx;
            height: 52rpx;
            border-radius: 8rpx;
          }

          .desc {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 28rpx;
            color: #111111;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
          }

          .online {
            width: 104rpx;
            height: 40rpx;
            background: #eaf7e3;
            border-radius: 8rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8rpx;

            .dot {
              width: 12rpx;
              height: 12rpx;
              background: #69c84a;
              border-radius: 12rpx;
            }

            .text {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 500;
              font-size: 24rpx;
              color: #69c84a;
            }
          }

          .address {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 28rpx;
            color: #b8b8b8;
            text-align: right;
          }
        }
      }
    }

    .line {
      border-bottom: 1px solid #ececec;
    }
  }
}
</style>
